第九天，相信大家在開發者工具常常用到console.log，這次看看console還有什麼功能吧

Day9

首先放個儲存資料的變數，等等範例中會用到

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

接下來就是介紹console的各種用法

// Regular 大家最常使用的console.log，可以印出指定的字串或是變數
console.log('hello');

// Interpolated %s會是一個變數，會帶入最後提供的字樣
console.log('Hello I am a %s string!', '?');

// Styled console也是可以改變樣式的，開頭用%c，之後就跟平常css一樣
// console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

// warning! 使用warn會跳出警告
console.warn('OH NOOO');

// Error :| 這應該最不想看到的狀況，會出現紅色的錯誤訊息
console.error('Shit!');

// Testing assert裡第一個參數可以帶一個判斷，如果不符合才會出現第二個參數的字串內容
const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'), 'That is wrong!');

// clearing 清除console內的文字
console.clear();

// Viewing DOM Elements log跟dir的差別是log可能只會印出dom的元素，但如果要看到元素更細節的
//方法、prototype等，就要使用dir
console.log(p);
console.dir(p);

// Grouping together 如果項範例中要印出每項資料，可以使用group去做分類，在閱讀是會更方便
dogs.forEach(dog => {
  console.groupCollapsed(`${dog.name}`);
  console.log(`This is ${dog.name}`);
  console.log(`${dog.name} is ${dog.age} years old`);
  console.log(`${dog.name} is ${dog.age * 7} dog years old`);
  console.groupEnd(`${dog.name}`);
});

// counting count可以去計算指定的字樣出現過幾次
console.count('Wes');
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Wes');
console.count('Steve');
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Steve');
console.count('Steve');
console.count('Steve');

// timing 可以用來計算在timeEnd當中的函式花了多少時間去完成
console.time('fetching data');
fetch('https://api.github.com/users/wesbos')
  .then(data => data.json())
  .then(data => {
    console.timeEnd('fetching data');
    console.log(data);
  });

以上為第九天內容。